<template>
  <view v-if="shenheStatus == 0 || data" class="content">
    <template v-if="data.man.is_open">
      <view class="title">团队人数</view>

      <view class="list">
        <view class="item">
          <view class="let">
            <view class="icon">
              <i class="iconfont icon-bussiness-man-fill"></i>
            </view>

            <view class="con">
              <view class="tit">团队人数达到</view>
              <view class="count"
                >{{ data.man.data.count.real }}/{{
                  data.man.data.count.predict
                }}人</view
              >
            </view>
          </view>
          <view class="rig">
            <view
              v-if="!data.man.data.count.status"
              @click="$utils.toUrl('/pages/my/my', 'switchtab')"
              >去完成</view
            >
            <view v-else class="on">已完成</view>
          </view>
        </view>
        <view class="item">
          <view class="let">
            <view class="icon">
              <i class="iconfont icon-consumption-fill"></i>
            </view>

            <view class="con">
              <view class="tit">团队消费达到</view>
              <view class="count"
                >{{ data.man.data.money.real }}/{{
                  data.man.data.money.predict
                }}元</view
              >
            </view>
          </view>
          <view class="rig">
            <view
              v-if="!data.man.data.money.status"
              @click="$utils.toUrl('/pages/home/home', 'switchtab')"
              >去完成</view
            >
            <view v-else class="on">已完成</view>
          </view>
        </view>
      </view>
    </template>

    <template v-if="data.order.is_open">
      <view class="title">团队订单金额</view>
      <view class="list">
        <view class="item">
          <view class="let">
            <view class="icon">
              <i class="iconfont icon-consumption-fill"></i>
            </view>

            <view class="con">
              <view class="tit">团队订单金额达到</view>
              <view class="count"
                >{{ data.order.data.money.real }}/{{
                  data.order.data.money.predict
                }}元</view
              >
            </view>
          </view>
          <view class="rig">
            <view
              v-if="!data.order.data.money.status"
              @click="$utils.toUrl('/pages/home/home', 'switchtab')"
              >去完成</view
            >
            <view v-else class="on">已完成</view>
          </view>
        </view>
      </view>
    </template>

    <template v-if="data.self.is_open">
      <view class="title">个人消费</view>
      <view class="list">
        <view class="item" v-if="data.self.data.total">
          <view class="let">
            <view class="icon s1">
              <i class="iconfont icon-consumption-fill"></i>
            </view>

            <view class="con">
              <view class="tit">个人累计消费</view>
              <view class="count"
                >{{ data.self.data.total.real }}/{{
                  data.self.data.total.predict
                }}元</view
              >
            </view>
          </view>
          <view class="rig">
            <view
              v-if="!data.self.data.total.status"
              @click="$utils.toUrl('/pages/home/home', 'switchtab')"
              >去完成</view
            >
            <view v-else class="on">已完成</view>
          </view>
        </view>
        <view class="item" v-if="data.self.data.single">
          <view class="let">
            <view class="icon s1">
              <i class="iconfont icon-consumption-fill"></i>
            </view>

            <view class="con">
              <view class="tit">个人单笔消费</view>
              <view class="count"
                >{{ data.self.data.single.real }}/{{
                  data.self.data.single.predict
                }}元</view
              >
            </view>
          </view>
          <view class="rig">
            <view
              v-if="!data.self.data.single.status"
              @click="$utils.toUrl('/pages/home/home', 'switchtab')"
              >去完成</view
            >
            <view v-else class="on">已完成</view>
          </view>
        </view>
      </view>
    </template>

    <template v-if="data.recharge.is_open">
      <view class="title">充值金额</view>
      <view class="list">
        <view class="item">
          <view class="let">
            <view class="icon">
              <i class="iconfont icon-money-credit-card-fill"></i>
            </view>

            <view class="con">
              <view class="tit">累计充值金额</view>
              <view class="count"
                >{{ data.recharge.data.money.real }}/{{
                  data.recharge.data.money.predict
                }}元</view
              >
            </view>
          </view>
          <view class="rig">
            <view
              v-if="!data.recharge.data.money.status"
              @click="$utils.toUrl('/user/balance/recharge')"
              >去完成</view
            >
            <view v-else class="on">已完成</view>
          </view>
        </view>
      </view>
    </template>

    <template v-if="data.goods.is_open">
      <view class="title">购买商品</view>
      <view class="list">
        <view class="item">
          <view class="let">
            <view class="icon">
              <i class="iconfont icon-a-Newuserzone-fill"></i>
            </view>

            <view class="con">
              <view class="tit">购买指定商品</view>
            </view>
          </view>
          <view class="rig">
            <view
              v-if="!data.goods.data.num.status"
              @click="$utils.toUrl('/shareholder/shareholder/goods')"
              >去完成</view
            >
            <view v-else class="on">已完成</view>
          </view>
        </view>
      </view>
    </template>

    <view class="list mt24">
      <view class="item">
        <view class="let">
          <view class="icon">
            <i class="iconfont icon-prompt-fill"></i>
          </view>

          <view class="con">
            <view class="tit">{{ shareHolderAliasName }}协议</view>
            <view class="count">查看{{ shareHolderAliasName }}申请协议</view>
          </view>
        </view>
        <view class="rig">
          <view
            @click="$utils.toUrl('/user/my/article-detail?id=holder_agreement')"
            class="on"
            >去查看</view
          >
        </view>
      </view>
    </view>

    <view class="footer-btn" @click="submit">
      <view :class="data.is_apply_holder !== 1 ? 'disabled' : ''">{{
        data.is_apply_holder !== 1
          ? "还未达成条件，请完成条件"
          : "已达成条件，立即申请股东"
      }}</view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      data: null,
      shareHolderAliasName: ""
    };
  },

  methods: {
    async submit() {
      switch (this.data.is_apply_holder) {
        case 1:
          this.$utils.toUrl("/shareholder/apply/apply");
          break;

        case 2:
          this.$utils.toUrl("/shareholder/shareholder/index", "redirectTo");
          break;
      }
    },

    async getIndex() {
      const res = await this.$allrequest.shareholder.applyStatus();
      if (res.code == 0) {
        if (res.data.is_holder) {
          this.$utils.toUrl("/shareholder/shareholder/index", "redirectTo");
          return;
        }
        this.data = res.data;
      }
    }
  },

  onShow() {
    this.getIndex();
  },

  onLoad() {
    this.shareHolderAliasName = uni.getStorageSync("shareHolderAliasName");
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0 24rpx 150rpx;
  padding: 0 24rpx calc(150rpx + constant(safe-area-inset-bottom));
  padding: 0 24rpx calc(150rpx + env(safe-area-inset-bottom));
  min-height: 100vh;
  background: #f2f2f2;
}

.footer-btn {
}

.title {
  padding: 24rpx 0;
  font-size: 30rpx;
  font-weight: bold;
  color: #262626;
}

.list {
  border-radius: 24rpx;
  overflow: hidden;

  .item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 26rpx 24rpx;
    background: #fff;
    overflow: hidden;

    &:after {
      content: "";
      position: absolute;
      left: 26rpx;
      right: 26rpx;
      bottom: 0;
      height: 2rpx;
      background: #f8f8f8;
    }

    &:last-of-type:after {
      display: none;
    }

    .let {
      display: flex;
      align-items: center;
      flex: 1;
      overflow: hidden;
    }

    .con {
      flex: 1;
      overflow: hidden;
      margin-left: 16rpx;
    }

    .tit {
      font-size: 30rpx;
      font-weight: bold;
      color: #262626;
    }

    .count {
      font-size: 24rpx;
      color: #8c8c8c;
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72rpx;
      height: 72rpx;
      border-radius: 32px;
      background: #f8f8f8;

      .iconfont {
        font-size: 55rpx;
      }
    }

    .rig {
      margin-left: 10rpx;
      view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 50rpx;
        border-radius: 8rpx;
        border: 2rpx solid #f0250e;
        font-size: 24rpx;
        color: #f0250e;
        font-weight: bold;

        &.on {
          background: #f0250e;
          color: #fff;
        }
      }
    }
  }
}

.footer-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
  width: 100%;
  background: #fff;
  padding: 10rpx 36rpx 10rpx;
  padding: 10rpx 36rpx calc(10rpx + constant(safe-area-inset-bottom));
  padding: 10rpx 36rpx calc(10rpx + env(safe-area-inset-bottom));

  view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    border-radius: 32px;
    font-size: 32rpx;
    color: #fff;
    font-weight: bold;
    background: #f0250e;

    &.disabled {
      background: #8c8c8c;
    }
  }
}

.icon-bussiness-man-fill {
  color: #3775f6;
}
.icon-consumption-fill {
  color: #faa522;
}

.s1 .icon-consumption-fill {
  color: #f96431;
}

.icon-money-credit-card-fill {
  color: #f9952c;
}

.icon-a-Newuserzone-fill {
  color: #3775f6;
}

.mt24 {
  margin-top: 24rpx;
}
</style>
